<template>
  <div
    id="myChart6"
    :style="{ height: 3.7 * $store.state.radomRate + 'rem' }"
  ></div>
</template>
<script>
export default {
  data() {
    return {
      time: new Date().getTime(),
    };
  },
  mounted() {
    this.getGcEstateWeight();
  },
  methods: {
    getGcEstateWeight() {
      let params = {
        time: this.time,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.getGcEstateWeight, {
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.drawLine(res.data.data);
        })
        .catch(() => {});
    },
    drawLine(list) {
      let myChart = this.$echarts.init(document.getElementById("myChart6"));
      let listData = list.splice(0, 5);
      let xData = listData.map((item) => {
        return item.estate;
      });
      let yData = listData.map((item) => {
        return item.weight;
      });
      var option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.7)", //通过设置rgba调节背景颜色与透明度
          borderWidth: "0",
          textStyle: {
            color: "#fff",
          },
          formatter: function (params) {
            return `${params[0].name}<br/>${params[0].value}`;
          },
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "8%",
          top: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData,
          axisLine: {
            onZero: false,
            lineStyle: { color: "#ffffff", opacity: 0.1 },
          },
          axisTick: { show: false },
          axisLabel: {
            textStyle: { fontSize: 12, color: "#000" },
            margin: 20,
            interval: 0,
          },
          splitLine: { show: false },
        },
        yAxis: {
          type: "value",
          splitNumber: 5,
          name: "",
          nameTextStyle: { fontSize: 12, color: "#9bb8e0" },
          axisLine: {
            onZero: false,
            lineStyle: { color: "#000", opacity: 0.1 },
          },
          axisTick: { show: false },
          axisLabel: { textStyle: { fontSize: 12, color: "#000" } },
          splitLine: { lineStyle: { color: "#000", opacity: 0.04 } },
        },
        animationDuration: 2000,
        animationDurationUpdate: 800,
        series: [
          {
            backgroundColor: "#f00",
            type: "bar",
            name: "",
            stack: "",
            barWidth: "20",
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color:new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgb(70,217,198,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgb(65,121,235,1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: yData,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
</style>